.square_slide_bar_box {
    position: relative;
    top: 100px;
    left: 50%;
    width: 500px;
    height: 80px;
    transform: translateX(-50%);
}
.square_slide_bar_box .square_slilde_bar_track,
.square_slide_bar_box .square_slilde_bar {
    position: absolute;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
}
.square_slide_bar_box .square_slilde_bar_track {
    z-index: 1;
    width: 100%;
    background-color: rgb(204, 204, 204);
}
.square_slide_bar_box .square_slilde_bar {
    z-index: 2;
    width: 0%;
}
.square_slide_bar_box .square_slilde_bar .square {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 22.5px;
    height: 22.5px;
    box-shadow: 0px 0px 10px 1px #fff inset;
    background-color: rgb(0, 205, 255);
    transform: translate(-50%, -50%);
    cursor: pointer;
}